<template>
  <div>
      <div class="item" >
      <p @click="toggleDetail(item.name)">{{item.name}}</p>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity';
import {mapMutations} from 'vuex'
export default {
    props:{
        item:{
            type:Object
        }
    },
    setup(){
       const state = reactive({
           toggleDetail(val){
               console.log(val)
           },
           ...mapMutations(["changeTitle"])
       })
       const refState = toRefs(state);
       return{
           ...refState
       }
    }
}
</script>

<style scoped>
p{
  padding: 10px 0;
}
</style>